<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <body>

    <h1>My shopping list</h1>

    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button>Add item</button>
    </div>

    <ul>
      <!-- <li>
      </li> -->
      <li>
        <span>1111</span>
        <button>delete</button>
      </li>
    </ul>

    <script>
      const list = document.querySelector('ul');
      const input = document.querySelector('#item');
      const button = document.querySelector('button');

      button.onclick = handleSubmit;
      // button.addEventListener('click', handleSubmit)


      function handleSubmit() {
        let myItem = input.value

        if (myItem === '') {
          alert('请输入不为空的值')
          return
        }

        const listItem = document.createElement('li');
        const listText = document.createElement('span');
        const listBtn = document.createElement('button');

        listItem.appendChild(listText);
        listText.textContent = myItem;
        listItem.appendChild(listBtn);
        listBtn.textContent = 'Delete';
        list.appendChild(listItem);

        listBtn.onclick = function(e) {
          list.removeChild(listItem);
        }

        input.value = '';
        input.focus();
      }

      input.addEventListener('keyup', function(e){
        if(e.keyCode === 13) {
          handleSubmit()
        }
      })

      
      // input.onkeyup = function(e) {
      //   if (e.keyCode === 13) {
      //     // 函数调用
      //     handleSubmit()
      //   }
      //   console.log(e)
      // }
      // $.ajax({
      //   type: "GET",
      //   url: "https://www.fastmock.site/mock/17141739a307a43177e2a944361cf670/api/getUserInfo",
      //   data: {
      //     name: 9527
      //   },
      //   success: function (res) {
      //     console.log(res)
      //     if (res.code === '000000') {
      //       let pElement = document.createElement('p')
      //       pElement.textContent = res.data.name
      //       // document.body.appendChild(pElement)
      //     } else {
      //       alert(res.msg)
      //     } 
      //   }
      // });
    </script>
  </body>
</html>
